import React, { Component } from "react";
import "./Wofuzwderenwu.less";
import api from "./../../api";
import { Button, Form, Input, Select, Table, DatePicker, Space } from "antd";
import axios from "./../../utils/axios";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
export default class Wocanyuderenwu extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      data: [],
      task_id: "",
      task_name: "",
      creator: "",
      create_date: "",
      deadline: "",
      task_status:"待提交",
      principal:"",
      currentPage:"",
      pageSize:"",
      emp_name:""
    };
  }
  romref = React.createRef();
  formRef = React.createRef();

   //初始化渲染
  componentDidMount() {
    let {currentPage,pageSize,emp_name}=this.state;
    axios({
      url:api.Get_Wocanyuderenwu,
      params:{currentPage,pageSize,emp_name}
    }).then(res=>{
      if (res.data.code === 200) {
              this.setState({
                data: res.data.data,
              });
            }
            if(res.data.code===404){
              this.error("找不到文件路径")
            }
            if (res.data.code === 500) {
              this.error("数据库出错");
            }
          }).catch((err) => {
            console.log("数据出错", err);
    }).catch(error=>{
      console.log(error);
    })
  }
  
  // 查询
    search=()=>{
      let {task_name,creator,principal,currentPage,pageSize,emp_name}=this.state;
      axios({
        url:api.Get_Wocanyuderenwusearch,
        params:{task_name,creator,principal,currentPage,pageSize,emp_name}
      }).then(res=>{
        if (res.data.code === 200) {
                this.setState({
                  data: res.data.data,
                });console.log(res.data.data);
              }
              if(res.data.code===404){
                this.error("找不到文件路径")
              }
              if (res.data.code === 500) {
                this.error("数据库出错");
              }
            }).catch((err) => {
              console.log("数据出错", err);
      }).catch(error=>{
        console.log(error);
      })
    }

  onFinish = (values) => {
    console.log(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onChange = (e) => {
    e.preventDefault();
    console.log("value", e.target.value);
    let key = e.target.dataset.key;
    this.setState({ [key]: e.target.value });
  };

  change=(e)=>{
    let key=e.target.dataset.key;
    this.setState({
      [key]:e.target.value
    })
   }
  render() {
    let {task_name,principal,creator,task_status,create_date}=this.state
    const columns = [
      {
        title: "序号",
        dataIndex: "task_id",
        key: "task_id",
        fixed: "true",
        align: "center",
      },
      {
        title: "任务状态",
        dataIndex: "task_status",
        key: "task_status",
        fixed: "true",
        align: "center",
        render:(_,res)=>{
          let state={
            0:"已完成",
            1:"待提交",
            2:"待审核",
            3:"审核拒绝"
        }
        return state[res.task_status]||"没有找到该状态"
        }
      },
      {
        title: "任务名称",
        dataIndex: "task_name",
        key: "task_name",
        align: "center",
      },
      {
        title: "截止日期",
        dataIndex: "deadline",
        key: "2",
        align: "center",
      },
      {
        title: "负责人",
        dataIndex: "principal",
        key: "principal",
        align: "center",
      },
      {
        title: "创建人",
        dataIndex: "creator",
        key: "creator",
        align: "center",
      },
      {
        title: "创建时间",
        dataIndex: "create_date",
        key: "create_date",
        align: "center",
      },

      {
        title: "操作",
        key: "operation",
        fixed: "true",
        render: () => <span className="actions">查看详情</span>,
        align: "center",
      },
    ];
    return (
      <>
        <Form  {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
          <Form.Item name="task_name"  label="任务名称">
            <Input value={task_name} onChange={this.change} data-key="task_name"/>
          </Form.Item>
          <Form.Item name="creator" label="创建人" > 
            <Input value={creator} onChange={this.change} data-key="creator"/>
          </Form.Item>
          <Form.Item name="principal"  label="负责人">
            <Input value={principal} onChange={this.change} data-key="principal" />
          </Form.Item>
          <Form.Item label="创建时间">
            <Space direction="vertical"  name="create_date" value={create_date} onChange={this.change} data-key="create_date">
              <DatePicker placeholder="" />
            </Space>
          </Form.Item>
          <Form.Item  name="task_status" label="任务状态">
            <Select allowClear defaultValue="male" value={task_status} onChange={this.change} data-key="task_status">
              <Option value="male">待提交</Option>
              <Option value="female">待审核</Option>
              <Option value="other">已完成</Option>
              <Option value="jujue">拒绝审核</Option>
            </Select>
          </Form.Item>
          <Form.Item></Form.Item>
        </Form>
        <div className="ant-btn-block">
          <Button type="primary" htmlType="submit">查询</Button>
          <Button htmlType="button" onClick={this.onReset}>重置</Button>
        </div>
        <Table columns={columns} dataSource={this.state.data} scroll={{}} rowKey={record => record.task_id} />
      </>
    );
  }
}
